<script setup>
import { ref } from "vue";
import { request } from "@/common/http";
import { ApiUrl } from "@/common/ApiUrl";
import { jumpPage, Toast } from "@/utils";
import { formatDate } from "@/utils/date";

const props = defineProps({
	item: {
		type: Object,
		default: () => {}
	}
})

/* 流量卡弹窗 */
let iccidPopup = ref(false);
/* 设备码弹窗 */
let qrcodePopup = ref(false);
/* 设备码图片 */
let qrcodeImage = ref(null);
/* 当前选择的设备 */
let machineItem = ref({});

/* 流量卡按钮点击事件 */
const handleIccid = (item) => {
	iccidPopup.value = true;
	machineItem.value = item;
}

/* 补货记录按钮点击事件 */
const handleSupplementRecord = (item) => {
	/* 跳转到补货记录页面 */
	jumpPage(`/pages/index/DeviceManager/Record?machineNo=${item.machineNo}`);
}

/* 管理按钮点击事件-跳转编辑设备页面 */
const handleManageMachine = (item) => {
	jumpPage(`/pages/index/DeviceManager/Add?id=${item.id}`);
}

/* 货道按钮点击事件 */
const handleRestock = (item) => {
	jumpPage(`/pages/index/Restock/index?machineId=${item.id}`);
}

/* 机器测试按钮点击事件 */
const handleMachineTest = (item) => {
	jumpPage(`/pages/index/MachineTest/index?machineNo=${item.machineNo}`);
}

/* 设备码按钮点击事件 */
const handleViewMachineQrCode = () => {
	request({
		url: `${ApiUrl.getMachineQrCode}`,
		data: {
			marId: props.item.id
		}
	}).then(res => {
		if (res.code === 200) {
			qrcodeImage.value = res.data;
			qrcodePopup.value = true;
		}
	})
}
</script>

<template>
	<view class="card">
		<view class="header">
			<view class="name">
				机器编号：{{ item?.machineNo }}
				<template v-if="item.area?.address">
					（{{ item.area?.address }}）
				</template>
			</view>
		</view>
		<view class="body">
			<view class="item">运营商：<view class="content">{{ item.user?.userName }}</view></view>
			<view class="item">网络：
				<image v-if="item.network == null || item.network == 0" mode="widthFix" class="signal" src="/static/image/icon_network0.png"/>
				<image v-if="item.network >= 1 && item.network < 10" mode="widthFix" class="signal" src="/static/image/icon_network1.png"/>
				<image v-if="item.network >= 10 && item.network < 20" mode="widthFix" class="signal" src="/static/image/icon_network2.png"/>
				<image v-if="item.network >= 20" mode="widthFix" class="signal" src="/static/image/icon_network3.png"/>
			</view>
			<view class="item">到期时间：<view class="content">{{ formatDate(item.expirationTime) }}</view></view>
			<view class="item">运营状态：<view class="content">{{ item.status == 1 ? "运营" : "关闭" }}</view></view>
		</view>
		<view class="footer">
			<view class="icon">
				<view class="item" @click="handleIccid(item)">
					<image mode="widthFix" src="/static/image/icon/sim.png"/>
					<text>流量卡</text>
				</view>
				<view class="item" @click="handleSupplementRecord(item)">
					<image mode="widthFix" src="/static/image/icon/add_record.png"/>
					<text>补货记录</text>
				</view>
				<view class="item" @click="handleMachineTest(item)">
					<image mode="widthFix" src="/static/image/icon/test.png"/>
					<text>机器测试</text>
				</view>
				<view class="item" @click="handleViewMachineQrCode">
					<image mode="widthFix" src="/static/image/icon/code.png"/>
					<text>设备码</text>
				</view>
			</view>
			<view class="action">
				<view @click="handleManageMachine(item)">管理</view>
				<view @click="handleRestock(item)">货道</view>
			</view>
		</view>
		
		<!-- 流量卡弹窗 -->
		<u-popup :show="iccidPopup" mode="center" :round="16">
			<view class="iccid_popup">
				<view class="popup_title">流量卡</view>
				<view class="popup_iccid">流量卡号：{{ machineItem.iccid ? machineItem.iccid : "无"}}</view>
				<view class="popup_btn" @click="iccidPopup = false">我知道了</view>
			</view>
		</u-popup>
		
		<!-- 设备码弹窗 -->
		<u-popup :show="qrcodePopup" mode="center" :round="16">
			<view class="qrcode_popup">
				<view class="popup_title">设备码</view>
				<image :src="qrcodeImage" mode="aspectFill"></image>
				<view class=".popup_btn" @click="qrcodePopup = false">我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<style lang='scss'>
.card {
  background: #FFFFFF;
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
  border-radius: 8rpx 8rpx 0 0;
}
.header {
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
  padding: 22rpx 0;
  .name {
    font-size: 28rpx;
    font-weight: bold;
    position: relative;
    margin-left: 26rpx;
    &:before {
      content: '';
      width: 6rpx;
      height: 40rpx;
      position: absolute;
      left: -26rpx;
      background: #FF4638;
      border-radius: 3rpx 3rpx 3rpx 3rpx;
    }
  }
}
.body{
  padding: 24rpx 32rpx 34rpx;
  font-size: 24rpx;
  display: flex;
  flex-wrap: wrap;
  row-gap: 12rpx;
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
  color: #969699;
  .content {
    color: #303030;
    display: inline-block;
  }
  .item {
    width: 50%;
  }
  .signal {
    width: 28rpx;
  }
}
.footer {
  padding: 12rpx 32rpx;
  display: flex;
  .icon {
    display: flex;
    column-gap: 40rpx;
    font-size: 16rpx;
    .item {
      font-size: 16rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
			text {
				font-size: 16rpx;
				color: #303030;
				line-height: 36rpx;
			}
    }
    image {
      width: 45rpx;
    }
  }
  .action {
    margin-left: 50rpx;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
		view {
			box-sizing: border-box;
			width: 102rpx;
			height: 56rpx;
			border-radius: 40rpx;
			border: 2rpx solid #FF776A;
			font-size: 24rpx;
			color: #FF4638;
			line-height: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&:last-child {
				background: linear-gradient( 90deg, #FF766C 0%, #FF4638 100%);
				color: #ffffff;
			}
		}
  }
}
.iccid_popup {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: 40rpx 0 0;
	width: 600rpx;
	.popup_iccid {
		font-size: 24rpx;
		line-height: 28rpx;
		color: #353535;
		text-align: center;
		margin: 0 20rpx 40rpx;
	}
}
.qrcode_popup {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: 40rpx 0 0;
	width: 600rpx;
	image {
		width: 200rpx;
		height: 200rpx;
		margin: 0 0 40rpx;
	}
}
.popup_title {
	font-weight: bold;
	font-size: 32rpx;
	line-height: 38rpx;
	color: #353535;
	letter-spacing: 1px;
	text-align: center;
	margin-bottom: 40rpx;
}
.popup_btn {
	width: 100%;
	height: 112rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #FF4638;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 2rpx solid rgba(0, 0, 0, 0.1);
}
</style>